<template>
  <el-drawer
    title="购物车"
    :visible.sync="visible"
    direction="rtl"
    size="30%">
    <div class="cart-container">
      <div v-if="cart.length === 0" class="empty-cart">
        <i class="el-icon-shopping-cart-2"></i>
        <p>购物车是空的</p>
      </div>
      <div v-else>
        <div class="cart-items">
          <div v-for="(item, index) in cart" :key="index" class="cart-item">
            <div class="item-info">
              <div class="item-name">{{ item.name }}</div>
              <div class="item-price">¥{{ item.price.toFixed(2) }} × {{ item.quantity }}</div>
            </div>
            <div class="item-actions">
              <el-input-number 
                v-model="item.quantity" 
                :min="1" 
                :max="99"
                size="mini"
                @change="updateCartItem(index, item.quantity)"
              ></el-input-number>
              <el-button type="danger" icon="el-icon-delete" size="mini" @click="removeCartItem(index)"></el-button>
            </div>
          </div>
        </div>
        <div class="cart-footer">
          <div class="cart-total">
            <span>合计:</span>
            <span class="total-price">¥{{ cartTotal.toFixed(2) }}</span>
          </div>
          <el-button type="primary" @click="checkout">结算</el-button>
        </div>
      </div>
    </div>
  </el-drawer>
</template>

<script>
import { mapState, mapGetters } from 'vuex'

export default {
  name: 'Cart',
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  computed: {
    ...mapState(['cart']),
    ...mapGetters(['cartTotal'])
  },
  methods: {
    updateCartItem(index, quantity) {
      this.$store.commit('updateCartItem', { index, quantity })
    },
    removeCartItem(index) {
      this.$store.commit('removeCartItem', index)
    },
    checkout() {
      // 检查购物车是否为空
      if (this.cart.length === 0) {
        this.$message.warning('购物车为空')
        return
      }
      
      // 关闭购物车抽屉
      this.$emit('update:visible', false)
      
      // 导航到商家页面进行结算
      const merchantId = this.cart[0].merchantId
      this.$router.push(`/shop/${merchantId}?checkout=true`)
    }
  }
}
</script>

<style scoped>
.cart-container {
  padding: 0 20px 20px;
}
.empty-cart {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 0;
}
.empty-cart i {
  font-size: 48px;
  color: #ccc;
}
.empty-cart p {
  color: #999;
  margin-top: 10px;
}
.cart-items {
  margin-bottom: 20px;
}
.cart-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 10px 0;
  border-bottom: 1px solid #eee;
}
.item-info {
  flex-grow: 1;
}
.item-name {
  font-weight: bold;
}
.item-price {
  color: #666;
  font-size: 13px;
}
.item-actions {
  display: flex;
  align-items: center;
}
.item-actions .el-button {
  margin-left: 10px;
}
.cart-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-top: 20px;
  padding-top: 20px;
  border-top: 1px solid #eee;
}
.cart-total {
  font-size: 16px;
}
.total-price {
  font-size: 20px;
  color: #f56c6c;
  font-weight: bold;
}
</style> 